<template>
	<block>
		<view class="container">
			<image @error="" @load="" class="logo" :lazyLoad="false" mode="aspectFit" src="/static/bingai.jpg" />
			<view class="login-info info-text">欢迎使用AI助手，登录即可享受服务
			</view>
			<view>
				<view>
					<button @tap="bindLogin" class="btn btn-primary btn-login">账号密码登录</button>
				</view>
			</view>
			<button @tap="bindRegister" class="btn btn-info btn-cancel">账号密码注册</button>
			<view class="footer" @tap="radioChange">
				<view v-if="!isRadio" class="foot-icon-gray"></view>
				<view v-if="isRadio" class="foot-icon-blue"></view>
				<view class="footer-text">
					我阅读并同意
					<text @tap.stop="handlePolicy(0)" class="blue">《用户协议》</text>
					<text @tap.stop="handlePolicy(1)" class="blue">《隐私政策》</text>
				</view>
			</view>

			<!-- 登录框 -->
			<u-popup :show="showPopupLogin" closeable :round="30" mode="bottom" @close="closePopupLogin"
				@open="openPopupLogin">
				<view style="padding: 52rpx 61rpx;">
					<text class="popup-title">账号密码登录</text>
					<view class="input-list">
						<view class="input-item">
							<image src="/static/username.png" style="margin-left: 38rpx;" mode="" />
							<input placeholder="请输入邮箱" v-model="loginForm.email"
								style="padding: 0 15rpx 0 31rpx;width: 100%;"
								placeholder-style="font-size: 24rpx;font-weight: 500;letter-spacing: 2rpx;color: #7A7A7A;"
								type="text">
						</view>
						<view class="input-item">
							<image src="/static/password.png" style="margin-left: 38rpx;" mode="" />
							<input placeholder="请输入登录密码" :password="loginForm.showPwd" v-model="loginForm.password"
								style="padding: 0 15rpx 0 31rpx;width: 70%;"
								placeholder-style="font-size: 24rpx;font-weight: 500;letter-spacing: 2rpx;color: #7A7A7A;"
								type="text">
							<image v-if="loginForm.showPwd" src="/static/eye-close.png"
								@tap="loginForm.showPwd = !loginForm.showPwd" mode="" />
							<image v-else src="/static/eye-open.png" @tap="loginForm.showPwd = !loginForm.showPwd"
								mode="" />
						</view>
					</view>
					<view @tap="login" class="popup-btn">
						立即登录
					</view>
				</view>
			</u-popup>

			<!-- 注册框 -->
			<u-popup :show="showPopupRegister" closeable :round="30" mode="bottom" @close="closePopupRegister"
				@open="openPopupRegister">
				<view style="padding: 52rpx 61rpx;">
					<text class="popup-title">账号密码注册</text>
					<view class="input-list">
						<view class="input-item">
							<image src="/static/username.png" style="margin-left: 38rpx;" mode="" />
							<input placeholder="请输入邮箱" v-model="registerForm.email"
								style="padding: 0 15rpx 0 31rpx;width: 100%;"
								placeholder-style="font-size: 24rpx;font-weight: 500;letter-spacing: 2rpx;color: #7A7A7A;"
								type="text">
						</view>
						<view class="input-item">
							<image src="/static/password.png" style="margin-left: 38rpx;" mode="" />
							<input placeholder="请输入登录密码" v-model="registerForm.password"
								style="padding: 0 15rpx 0 31rpx;width: 70%;" :password="registerForm.showPwd"
								placeholder-style="font-size: 24rpx;font-weight: 500;letter-spacing: 2rpx;color: #7A7A7A;">
							<image v-if="registerForm.showPwd" src="/static/eye-close.png"
								@tap="registerForm.showPwd = !registerForm.showPwd" mode="" />
							<image v-else src="/static/eye-open.png" @tap="registerForm.showPwd = !registerForm.showPwd"
								mode="" />
						</view>
						<view class="input-item">
							<image src="/static/password.png" style="margin-left: 38rpx;" mode="" />
							<input placeholder="请再次确定密码" v-model="registerForm.password2"
								style="padding: 0 15rpx 0 31rpx;width: 70%;" :password="registerForm.showPwd2"
								placeholder-style="font-size: 24rpx;font-weight: 500;letter-spacing: 2rpx;color: #7A7A7A;">
							<image v-if="registerForm.showPwd2" src="/static/eye-close.png"
								@tap="registerForm.showPwd2 = !registerForm.showPwd2" mode="" />
							<image v-else src="/static/eye-open.png"
								@tap="registerForm.showPwd2 = !registerForm.showPwd2" mode="" />
						</view>
					</view>
					<view @tap="register" class="popup-btn">
						立即注册
					</view>
				</view>
			</u-popup>
		</view>
	</block>
</template>

<script>
	const memberApi = require("@/api/memberApi");

	export default {
		data() {
			return {
				pwdType: 'password',
				isRadio: true,
				// 登录
				showPopupLogin: false,
				loginForm: {
					email: '',
					password: '',
					showPwd: true
				},
				// 注册
				showPopupRegister: false,
				registerForm: {
					email: '',
					password: '',
					showPwd: true,
					password2: '',
					showPwd2: true
				}
			};
		},
		methods: {
			closePopupLogin() {
				this.showPopupLogin = false;
			},
			openPopupLogin() {
				this.showPopupLogin = true;
			},
			closePopupRegister() {
				this.showPopupRegister = false;
			},
			openPopupRegister() {
				this.showPopupRegister = true;
			},
			handlePolicy(idx) {
				this.isRadio = true;
				if (idx === 0) {
					uni.navigateTo({
						url: '/pages/disclaimer/serviceAgreement'
					})
				}
				if (idx === 1) {
					uni.navigateTo({
						url: '/pages/disclaimer/privacyPolicy'
					})
				}
			},
			checkRadio() {
				// 验证是否点击了同意
				if (!this.isRadio) {
					uni.showToast({
						title: "请先勾选用户政策与协议",
						icon: "none",
					})
				}
			},
			bindLogin() {
				this.showPopupLogin = true;
			},
			bindRegister() {
				this.showPopupRegister = true;
			},
			radioChange() {
				this.isRadio = !this.isRadio
			},
			login() {
				console.log(this.loginForm);
				let email_reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

				if (!email_reg.test(this.loginForm.email)) {
					uni.showModal({
						content: '邮箱格式不正确'
					})
					return;
				}

				// 登录
				let req_data = {
					username: this.loginForm.email,
					password: this.loginForm.password
				}
				memberApi.login(req_data).then(res => {
					console.log(res);
					if (!res.access) {
						// 登录失败
						this.showPopupLogin = false;
						uni.showModal({
							content: res.msg
						})
						return
					}
					// 存储进Storage
					const access = res.access;
					const refresh = res.refresh;
					uni.setStorageSync('access', access);
					uni.setStorageSync('refresh', refresh);
					// 跳转上一页
					uni.navigateBack()
				})
			},
			register() {
				console.log(this.registerForm);
				// 注册
				let req_data = {
					email: this.registerForm.email,
					password: this.registerForm.password,
					password2: this.registerForm.password2,
					memberType: 1
				}
				memberApi.register(req_data).then(res => {
					console.log(res);
					if (!res.data.access) {
						// 登录失败
						this.showPopupRegister = false;
						uni.showModal({
							content: res.msg
						})
						return
					}
					// 存储进Storage
					const access = res.data.access;
					const refresh = res.data.refresh;
					const user = res.data.user;
					getApp().globalData.userInfo = user;
					uni.setStorageSync('access', access);
					uni.setStorageSync('refresh', refresh);
					// 跳转上一页
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style>
	.popup-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #000000;
	}

	.input-list {
		margin-top: 30rpx;
		margin-bottom: 80rpx;
	}

	.input-item {
		width: 628rpx;
		height: 90rpx;
		border-radius: 12rpx;
		background: #F7F7F7;

		display: flex;
		flex-direction: row;
		align-items: center;

		margin: 24rpx 0;
	}

	.input-item>image {
		width: 30rpx;
		height: 30rpx;
	}

	.popup-btn {
		width: 630rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: #4A4FF5;

		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 6rpx;
		color: #FFFFFF;

		display: flex;
		align-items: center;
		justify-content: center;

		margin-bottom: 20rpx;
	}

	page {
		background-color: #fff;
		color: #434649;
		font-family: DIN-Medium;
		position: relative;
	}

	button {
		margin: 0 auto;
		padding: 0 !important;
	}

	button::after {
		border: none;
	}

	.logo {
		display: block;
		height: 200rpx;
		padding-top: 101px;
		margin: 0 auto;
	}

	.info-text {
		font-size: 28rpx;
		letter-spacing: 4rpx;
		line-height: 38rpx;
		text-align: center;
	}

	.login-info {
		margin: 58rpx auto 112rpx;
		width: 640rpx;
	}

	.btn {
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 700;
		height: 100rpx;
		letter-spacing: 6rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.btn-primary {
		background-color: #4A4FF5;
		box-shadow: 0 10rpx 30rpx rgba(73, 79, 244, 0.24);
		color: #fff;
	}

	.btn-info {
		/* background-color: #ededed; */
		background-color: #E4E5FE;
		color: #4A4FF5;
	}

	.btn-login {
		margin-bottom: 40rpx;
	}

	.btn-cancel,
	.btn-login {
		width: 606rpx !important;
	}

	.dialog {
		background-color: rgba(0, 0, 0, 0.7);
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
	}

	.dialog-container {
		background-color: #fff;
		border-radius: 16rpx;
		height: 676rpx;
		left: 50%;
		padding-top: 24rpx;
		position: relative;
		top: 15%;
		transform: translate(-50%);
		width: 550rpx;
	}

	.info-image {
		display: block;
		height: 349rpx;
		margin: 0 auto;
		width: 374rpx;
	}

	.close {
		bottom: -88rpx;
		height: 88rpx;
		left: 50%;
		position: relative;
		transform: translateX(-50%);
		width: 88rpx;
	}

	.dialog-info {
		margin: 20rpx auto 0;
		width: 366rpx;
	}

	.btn-confirm {
		margin-top: 90rpx;
		width: 350rpx;
	}

	.footer {
		bottom: 80rpx;
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
		left: 50%;
		line-height: 38rpx;
		margin: 0 auto;
		position: fixed;
		transform: translateX(-50%);
		width: 660rpx;
	}

	.foot-icon-gray {
		height: 28rpx;
		width: 28rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 50%;
		margin-top: 25rpx;
		margin-right: 10rpx;
	}

	.foot-icon-blue {
		height: 28rpx;
		width: 28rpx;
		background: #4A4FF5;
		border: 1px solid #4A4FF5;
		border-radius: 50%;
		margin-top: 25rpx;
		margin-right: 10rpx;
	}

	.agree-icon {
		height: 28rpx;
		padding: 25rpx 10rpx 20rpx 11rpx;
		width: 28rpx;
	}

	.agree-icon image {
		display: block;
		height: 28rpx;
		width: 28rpx;
	}

	.footer-text {
		padding-top: 20rpx;
		width: 610rpx;
	}

	.footer .blue {
		color: #494ff4;
	}
</style>